<template>
	<div>
		<div class="header anquantop">
			<div class="left" @click="goback">
				<i style="display: inline-flex; justify-content: center; align-items: center;">
					<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor" aria-hidden="true"
						focusable="false">
						<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
					</svg>
				</i>
				<span></span>
			</div>
			<div class="title">{{$t('h_process.title1')}}</div>
			<div class="right"></div>
		</div>
		<div class="con">
			<el-table :data="lists" :row-class-name="tableClass" :cell-style="cellStyle" style="width: 100%"
				:header-cell-style="{background:'#151d28',color:'#53677d',borderColor:'#293548',borderBottom: '0.01rem solid #293548'}">
				<el-table-column prop="date" :label="$t('h_process.title2')">
					<template slot="header">
						<el-select v-model="value" :placeholder="$t('h_process.title3')" popper-class="elsedropdown" @change="fsLevel">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
					<template slot-scope="scope" v-if="scope.row.gameType == value">
						<span v-for="item in options" v-if="scope.row.gameType==item.value">{{item.label}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" :label="$t('h_process.title4')">
					<template slot="header">
						<el-select v-model="ptset" :placeholder="$t('h_process.title3')" popper-class="elsedropdown" @change="fsLevel">
							<el-option v-for="item in pts" :key="item.code" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="level_money" :label="$t('h_process.title5')"></el-table-column>
				<el-table-column prop="level_scale" :label="$t('h_process.title1')" width="120">
					<template slot-scope="scope">
						<span class="S4Fg1ixe0qwXbEiqJB6g">{{scope.row.level_scale*1}}%
							<!-- <i>当前</i> -->
							</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				lists:[],
				cacheLists:[],
				// tableData: [{
				// 	date: '棋牌',
				// 	name: 'WG',
				// 	address: '1,000,000',
				// 	addre: '0.7'
				// }, {
				// 	date: '棋牌',
				// 	name: 'WG',
				// 	address: '1,000,000',
				// 	addre: '0.7'
				// }, {
				// 	date: '棋牌',
				// 	name: 'WG',
				// 	address: '1,000,000',
				// 	addre: '0.7'
				// }, {
				// 	date: '棋牌',
				// 	name: 'WG',
				// 	address: '1,000,000',
				// 	addre: '0.7'
				// }],
				options: [{
					// 游戏类型，1:视讯、2:老虎机、3:彩票、4:体育、5:电竞、6:捕猎、7:棋牌
					value: '2',
					label: this.$t('h_ratioList.title24')
				}, {
					value: '1',
					label: this.$t('h_ratioList.title27')
				}, {
					value: '3',
					label: this.$t('h_ratioList.title29')
				}, {
					value: '5',
					label: this.$t('h_ratioList.title30')
				}, {
					value: '4',
					label: this.$t('h_ratioList.title28')
				}, {
					value: '6',
					label: this.$t('h_ratioList.title26')
				}, {
					value: '7',
					label: this.$t('h_ratioList.title25')
				}],
				pts:[],
				ptset:'ag',
				value: '2'
			}
		},
		created(){
			this.getPt()
		},
		methods: {
			getPt(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.getPt({
					
				},(res)=>{
					loading.close()
					if(res.code == 0){
						this.pts = res.data
						this.fsLevel()
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			fsLevel(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.fsLevel({
					pt:this.ptset,
					type:this.value
				},(res)=>{
					loading.close()
					if(res.code == 0){
						this.cacheLists = res.data
						this.reloadList()
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			reloadList(){
				this.lists = [];
				this.cacheLists.forEach((item,index)=>{
					if(item.gameType == this.value){
						this.lists.push(item)
					}
				})
			},
			tableClass({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 != 1) {
					//奇数行，序号不能被2整除
					return "even-row";
				} else {
					return "even-rowtow";
				}
			},
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 状态列字体颜色
				if (columnIndex === 0 || columnIndex === 1) {
					return 'color: var(--theme-text-color-lighten)'
				} else if (columnIndex === 2 || columnIndex === 3) {
					return 'color: var(--theme-text-color)'
				}
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>
<style type="text/css">
	.elsedropdown{
		border: 0.01rem solid var(--theme-color-line);
		    background-color: #171e28;
			margin-top: 3px !important;
	}
	.elsedropdown .el-select-dropdown__item{
		color: var(--theme-text-color-lighten);
	}
	.elsedropdown .popper__arrow{
		display: none;
	}
</style>
<style scoped>
	* {
		box-sizing: border-box;
	}
	/deep/.el-table, .el-table__expanded-cell{
		background-color: unset;
	}
	/deep/.el-select .el-input .el-select__caret {
		color: #005dff;
	}

	/deep/.el-table th.el-table__cell>.cell {
		text-align: center !important;
	}

	/deep/.el-input__inner {
		padding: 0 !important;
		padding-left: 5px !important;
		height: 30px !important;
		line-height: 30px !important;
		color: var(--theme-text-color) !important;
	}

	/deep/.el-input__inner::placeholder {
		color: var(--theme-text-color) !important;
	}

	/deep/.el-table td.el-table__cell div {
		text-align: center !important;
	}
	/deep/.even-row {
		background-color: #171e28;
		border-color: transparent;
	}

	/deep/.even-rowtow {
		background-color: #0e121b;
		border-color: transparent;
	}

	/deep/.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: none;
	}

	/deep/.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: transparent;
	}

	/deep/ .el-table__row:hover>td {
		background-color: transparent !important;
	}

	/deep/.S4Fg1ixe0qwXbEiqJB6g {
		position: relative;
	}

	/deep/.S4Fg1ixe0qwXbEiqJB6g i {
		background-color: var(--theme-secondary-color-error);
		border-radius: 0.125rem 0.125rem 0.125rem 0;
		color: #fff;
		font-size: .14rem;
		font-style: normal;
		height: 0.2rem;
		left: calc(100% + 0.04rem);
		padding: 0 0.08rem;
		position: absolute;
		font-size: .18rem;
		height: auto;
		line-height: .28rem;
		padding: 0.05rem 0.02rem 0.08rem;
		top: -0.22rem;
		z-index: 999;
		width: 0.78rem;
		word-break: break-all;
	}

	/deep/.el-table .cell {
		overflow: initial;
	}

	/deep/.S4Fg1ixe0qwXbEiqJB6g i:after {
		border-right: 0.08rem solid transparent;
		border-top: 0.07rem solid var(--theme-secondary-color-error);
		bottom: -0.06rem;
		content: "";
		height: 0;
		left: 0;
		position: absolute;
		width: 0;
	}
	/* //下拉框 */
	/deep/.el-select-dropdown{
	    border: none !important;
		z-index: 999;
	    background-color: rgba(1, 28, 82, 0.8) !important;
	}
	
	
	/* //鼠标经过下拉框 */
	.el-select-dropdown__item.hover, 
	.el-select-dropdown__item:hover{
	    color:#005dff !important;
	    background-color: transparent !important;
	}
	.header {
		width: 100%;
		height: 0.9rem;
		position: fixed;
		top: 0;
		left: 0;
		background: var(--theme-main-bg-color);
		border-bottom: 0.01rem solid var(--theme-color-line);
		z-index: 100;
		padding: 0 .1rem 0 .2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header .left {
		font-size: .24rem;
		height: 0.8rem;
		width: 0.8rem;
		display: flex;
		align-items: center;
		color: var(--theme-text-color);
		cursor: pointer;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.34rem;
		font-size: .3rem;
		margin-top: -0.014rem;
		color: #fff;
		text-align: center;
	}

	.header .right {
		height: 0.8rem;
		width: 0.8rem;
	}

	.con {
		width: 100%;
		margin-top: 0.9rem;
		/* padding: 0 0.2rem; */
		/* padding-top: 0.2rem; */
	}
</style>
